<template>
  <div class="shop" >
           <div class="proshow" >
            <swiper :options="swiperOption1">
              <swiper-slide v-for="(item,index) in imgUrl" :key="item.id">
                  <div class="order-content">
                     <img :src="item" alt="">
                  </div>
              </swiper-slide>
              <div class="swiper-shop2  proshow-pager" slot="pagination"></div>
            </swiper>
            <img v-if="paccdata.toplabelPath" :src="paccdata.toplabelPath" alt="" :class="paccdata.PathClass">
          </div>              
          <store v-if="shoptype == 'store'" :alldata="Alldata" v-on:pacc="paccFn"></store>

          <center v-if="shoptype == 'center'" :alldata="Alldata" v-on:pacc="paccFn"></center>
  </div>
</template>

<script>
//tabid就是路由传过来的
import Store from './store'
import Center from './center'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { mapState, mapGetters, mapMutations } from 'vuex'
import { img } from '../../../config/env'
import {  getDatailContent } from '@/service/getData'
 export default {
  data(){
    return {
      tabid: this.$route.params.tabid,
      imgUrl:[],
      imgTextFlag: '0',
      shoptype: '',
      Alldata: {},
      paccdata:{},

      swiperOption1: {
          pagination: '.swiper-shop2',
          paginationClickable: false,
          loop:false
      }
    }
  },

  created(){
  //商品信息
      getDatailContent({
        'cmmdtyCode': this.$route.params.cmmdtyCode,
        'storeLocation': this.position.storeLocation,
        'cityCode': this.position.cityCode,
        'supplierCode': this.$route.params.supplierCode
      })
      .then((json) => {
          if(json.resultMsg == "商品不存在") {
           AlertBox({
              type: 'mini',
              msg: "本苏鲜生店暂不销售此商品"
            })
           $('.detail, .protool, .shop').hide();
            return;
          }
            let data1 = json.resultData;


            if(!data1) return;
             //评价开关
              sessionStorage.isReview = data1.isReview
              
              //下拉展示图文详情
            
            this.$emit("imgTextFlag", data1.imgTextFlag)

            var that = this;
            var cmmdtyType = data1.cmmdtyType;
            var src;
            var url;
            var num1 = 0;
            if(parseInt(data1.cmmdtyImageNum) == 1){
                this.swiperOption1.paginationBulletRender = function(swiper, index, className){
                  return  ``;
                }
            }else{
                this.swiperOption1.paginationBulletRender = function(swiper, index, className) {
                    return  `<span class="${className} swiper-pagination-bullet-custom" style="
                    display: inline-block;width: 0.28rem; height: 0.28rem; margin: 0 0.18rem;background-color: #000;border-radius: 0.14rem;opacity:10% 
                  "></span>`;
                }
            }
            for(let i = 0; i < parseInt(data1.cmmdtyImageNum); i ++ ){
              if(data1.cmmdtyImageSrc == '0'){
                 // src = img()+'/uimg/b2c/newcatentries/'+ data1.shopId + '-' + data1.cmmdtyCode +'_' + (i+1) + '_800x800.jpg';
                  src = img()+'/uimg/b2c/newcatentries/'+ data1.shopId + '-' + data1.cmmdtyCode +'_' + (i+1) + '_800x800.jpg';
              }else {
                  src = img()+'/uimg/cmws/catentries/' + data1.cmmdtyCode + '_' + (i+1) + '_800x800.jpg';
              }
              that.imgUrl[i] = src;
              let src1 = new Image()
              src1.src = src;
              src1.onerror = function(){
                src = "/static/images/pro-default.png";
                that.$set(that.imgUrl, i, src);
              }
              
            }
              this.Alldata  =  data1;

              //微信的分享
              Window.wxObj.title = this.Alldata.cmmdtyName
              Window.wxObj.desc = this.Alldata.basicSalePoint
              Window.wxObj.link = location.href
              Window.wxObj.imgUrl = this.imgUrl[0]
            

            //获取商品之后获取价格
            // 中心仓
            if (cmmdtyType == '20') {
                this.shoptype = 'center'
                this.$store.dispatch('shoptype',{
                  typetext: 'center'
                });
            }
            // 小店|生鲜
            else {
                this.shoptype = 'store'
                this.$store.dispatch('shoptype',{
                  typetext: 'store'
                })
            }

          

      }) 

  },
  methods: {
    paccFn(data){
        this.paccdata = data
    }
  },
  computed: {
      ...mapGetters({
        // shoptype: 'gettype',
        position: 'position',
      })
  },
  components:{
    Center,
    Store,
    swiper,
    swiperSlide
  }
 
     
 }  
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
 
.shop {
    padding-bottom: 1.96rem;
}
 
.shop .order-content {
  position: relative;
}
 
.shop .order-content:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.03);
}
.shop .swiper-container {
  height: 100%;
}
 
.swiper-shop2 .swiper-pagination-bullet-active {
  opacity: 0.5 !important;
  border-bottom: 0 !important;
}
 
 
.proshow .proshow-pager {
    position: absolute;
    bottom: 0.48rem;
    left: 0;
    width: 100%;
    height: 0.28rem;
    text-align: center;
    z-index: 11;
}

.countdown {
    position: relative;
    height: 1.8rem;
    padding: 0 .56rem;
    line-height: 1.8rem;
    background: #FF782D;
    color: #FFF;
    font-size: .52rem;
    z-index: 2;
}
.countdown .label.label-djh {
    background-image: url(shop/label-djh.png);
}
.countdown .label.label-qg {
    background-image: url(shop/label-qg.png);
}
.countdown .label.label-yzhg {
    background-image: url(shop/label-yzhg.png);
}
.countdown .label.label-xsqg {
    background-image: url(shop/label-xsqg.png);
}
.countdown .lefttime {
    float: right;
    height: 100%;
    overflow: hidden;
}
.countdown .lefttime .distance-end {
  display: inline-block;
}
.countdown .lefttime .countdown-time {
  display: inline-block;
}
 

.countdown .lefttime span {
  vertical-align: middle;
}
 
.countdown .label {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4.4rem;
    height: 2rem;
    background-size: 100% 100%;
}
.countdown .lefttime i {
    display: inline-block;
    width: .56rem;
    height: .68rem;
    margin-left: 2px;
    line-height: .68rem;
    background: #FFF;
    border-radius: 2px;
    text-align: center;
    font-size: .56rem;
    color: #FF782D;
    vertical-align: middle;
    overflow: hidden;
}
.shop .proshow {
  position: relative;
}

.shop .proshow .rightbottom {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 11;
}
.shop .proshow .leftbottom {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 11;
}
.shop .proshow .righttop {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 11;
}
.shop .proshow .lefttop {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 11;
}
</style>
